<template>
  <div class="wrapper">
    <!-- 顶部一级导航 -->
    <v-head></v-head>
    <!-- 左侧导航栏 / 二级 -->
    <v-sidebar :menuList="menuList"></v-sidebar>
    <!-- 中间主体内容 -->
    <div class="content-box" v-if="!isIndex" :class="{'content-collapse':collapse}">
      <!-- 面包屑 -->
      <v-tags></v-tags>
      <div class="content table-content">
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
    <div class="content-box" v-if="isIndex">
      <v-tags></v-tags>
      <div class="content table-content">
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../common/Header.vue";
import vSidebar from "../common/Sidebar.vue";
import vTags from "../common/Tags.vue";
import bus from "../common/bus";

export default {
  data() {
    return {
      tagsList: [],
      collapse: false,
      isIndex: false,
      menuList: [
        {
          index: "1",
          icon: "el-icon-s-operation",
          name: "系统管理",
          children: [
            {
              index: "/role",
              icon: "el-icon-film",
              name: "角色管理",
            },
            {
              index: "/fun",
              icon: "el-icon-share",
              name: "功能管理",
            },
            {
              index: "/user",
              icon: "el-icon-s-help",
              name: "用户管理",
            },
            {
              index: '/teacher',
              icon: 'el-icon-reading',
              name: '教师管理',
            },
            {
              index: '/organization',
              icon: 'el-icon-user',
              name: '教学机构管理'
            }
          ],
        },
        // {
        //   index: "2",
        //   icon: "el-icon-s-platform",
        //   name: "安全追溯",
        //   children: [],
        // },
        {
          index: "2",
          icon: "el-icon-s-platform",
          name: "销售团队管理",
          children: [
            {
              index: "/department",
              icon: "el-icon-film",
              name: "销售团队",
            },
            {
              index: "/saler",
              icon: "el-icon-share",
              name: "销售人员",
            }
          ]
        }
      ]
    }
  },
  components: {
    vHead,
    vSidebar,
    vTags,
  }
  ,
  created() {
    bus.$on("collapse", (msg) => {
      this.collapse = msg;
    });
    bus.$on("isIndex", (msg) => {
      this.isIndex = msg;
    });
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on("tags", (msg) => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
  }
  ,
}
;
</script>
